<!--
 * new page
 * @author: YK
 * @since: 2024-01-24
 * index.vue
-->
<template>
  <div class="container">
    <m-table
      :data="DataList"
      :options="options"
      :loading="loading"
      @cancelCell="cancelCell"
      @saveCell="saveCell"
      :currentPage="current"
      :pageSize="pageSize"
      :total="total"
      @handlePageChange="handlePageChange"
      @handleSizeChange="handleSizeChange"
    >
      <template #action="{ scope }">
        <el-button size="small" type="primary" @click="edit(scope)"
          >编辑</el-button
        >
        <el-button type="danger">删除</el-button>
      </template>
      <template #pass="{ scope }">
        <el-button @click="passHandle(scope)">通过</el-button>
      </template>
    </m-table>
  </div>
</template>

<script setup lang="ts">
import { ref, Ref, onMounted } from "vue";
import { TableOptions } from "../../components/table/src/types";
import axios from "axios";
interface DataList {
  date: string;
  name: string;
  address: string;
}

const DataList: Ref<DataList[]> = ref([
  // {
  //   date: "2016-05-03",
  //   name: "Tom",
  //   address: "No. 189, Grove St, Los Angeles",
  //   id: "1",
  // },
  // {
  //   date: "2016-05-02",
  //   name: "Tom",
  //   address: "No. 189, Grove St, Los Angeles",
  //   id: "2",
  // },
  // {
  //   date: "2016-05-04",
  //   name: "Tom",
  //   address: "No. 189, Grove St, Los Angeles",
  //   id: "3",
  // },
  // {
  //   date: "2016-05-01",
  //   name: "Tom",
  //   address: "No. 189, Grove St, Los Angeles",
  //   id: "4",
  // },
]);
const current = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const loading = ref(false);
onMounted(() => getList());
const getList = () => {
  loading.value = true;
  axios
    .post("/api/list", { current: current.value, pageSize: pageSize.value })
    .then((res: any) => {
      console.log(res, "???");
      if (res.data.code === 200) {
        DataList.value = res.data.data.rows;
        total.value = res.data.data.total;
      }
      setTimeout(() => {
        loading.value = false;
      }, 500);
    });
};
const handlePageChange = (val: number) => {
  current.value = val;
  getList();
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getList();
};
//表格配置
const options: TableOptions[] = [
  { prop: "date", label: "日期", width: "180", align: "center", edit: true },
  { prop: "name", label: "姓名", width: "180", align: "center" },
  { prop: "address", label: "地址", align: "center" },
  { label: "审核", width: 120, slot: "pass", align: "center", prop: "ss" },
  {
    label: "操作",
    width: "180",
    align: "center",
    action: true,
    slot: "action",
    prop: "eidte",
    rowSlotName: "act",
  },
];
const edit = (scope: any) => {
  console.log(scope);
};
const passHandle = (scope: any) => {
  console.log(scope);
};
const cancelCell = (scope: any) => {
  console.log(scope);
};
const saveCell = (scope: any) => {
  console.log(scope, "父组件");
};
</script>

<style scoped lang="scss"></style>
